<template>
  <div>
    <el-dialog
      v-model="dialogFormVisible"
      width="30%"
      top="10vh"
      title="检测摄像头"
      @close="close"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleFormRef"
        label-width="85px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="onvif地址" prop="addx">
          <el-input v-model="form.addx" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="uuid" prop="uuid">
          <el-input v-model="form.uuid" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="账户" prop="username">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { detectionTable } from "@/type/camera";
const ruleFormRef = ref<FormInstance>();
const dialogFormVisible = ref<boolean>(true);
const porps = defineProps<{ detectionData: detectionTable }>();
const emit = defineEmits(["closePopUps", "getDetectionData"]);

const close = () => {
  emit("closePopUps");
};
const form = reactive({
  name: "",
  addx: "",
  uuid: "",
  username: "",
  password: ""
});
onMounted(() => {
  for (const key in porps.detectionData) {
    form[key] = porps.detectionData[key];
  }
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      emit("getDetectionData", form);
      dialogFormVisible.value = false;
    }
  });
};

const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
  addx: [{ required: true, message: "请输入onvif地址", trigger: "blur" }],
  uuid: [{ required: true, message: "请输入uuid", trigger: "blur" }],
  username: [{ required: true, message: "请输入账户", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }]
});
</script>
<style scoped lang="scss">
::v-deep .el-dialog__header {
  font-weight: 550;
}

::v-deep .el-dialog__body {
  padding: 8px 18px 0;
}
</style>
